<template>
    <el-dialog title="添加" :visible.sync="moduAddShow" width="50% !important" :show-close="false"
        :close-on-click-modal="false">
        <el-form :model="params">
            <el-form-item label="模块名" :label-width="formLabelWidth">
                <el-input v-model="params.modName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="shiro" :label-width="formLabelWidth">
                <el-input v-model="params.perms" placeholder="xx:cs" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="路径" :label-width="formLabelWidth">
                <el-input v-model="urlmodu.data" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="模块标记" :label-width="formLabelWidth">
                <el-input v-model="params.modRemark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="模块类型" :label-width="formLabelWidth" v-if="urlmodu.datashow">
                <el-select v-model="params.modType" placeholder="模块类型">
                    <el-option label="目录" value="0"></el-option>
                    <el-option label="菜单" value="1"></el-option>
                    <el-option label="按钮" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模块图标" :label-width="formLabelWidth">
                <!-- <icon-picker v-model="params.modMenuIcon"></icon-picker> -->
                <div class="chooseIcons">
                    <el-popover placement="top-start" :append-to-body="false" width="30vw" trigger="click">
                        <div slot="reference" class="iconDiv">
                            <i :class="params.modMenuIcon"></i>
                            <div class="iconName">{{ params.modMenuIcon }}</div>
                        </div>
                        <!--图标选择页面-->
                        <div class="iconList">
                            <i v-for="item in iconList" :key="item" :class="[item, 'icon']" @click="setIcon(item)"
                                style="font-size: 20px">
                            </i>
                        </div>
                    </el-popover>
                </div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelModu">取 消</el-button>
            <el-button type="primary" @click="determineModu">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { elementIcons } from '@/components/Form/Dialog/icon'
import { getData, getWork } from '@/api/table'
import { Message } from 'element-ui'

export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {
        moduAddShow: {
            type: Boolean,
            required: true,
        },
        params: {
            type: Object,
            required: true,
        },
        createdUrl: {
            type: String,
            required: true,
        },
        urlmodu: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            // 路径
            formLabelWidth: '120px',
            getUrl: '/module/index',
            chooseIcons: '',
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {

        //给icon绑定的点击事件
        setIcon(icon) {
            this.params.modMenuIcon = icon;//将i的样式设为选中的样式el-icon-xxx
            this.chooseIcons = ""
        },
        cancelModu() {
            this.$emit('purview-modu', false);
            // this.urlmodu = ''
        },
        determineModu() {
            if (this.urlmodu.datashow) {
                if (this.params.modUrl == '') {
                    this.params.modUrl = this.urlmodu.data
                } else {
                    this.params.modUrl = this.params.modUrl + this.urlmodu.data
                }
            } else {
                this.params.modUrl = this.urlmodu.data
            }
            // console.log(this.params);
            const met = 'POST'
            let formdata = new FormData()
            formdata.append('params', JSON.stringify(this.params))
            getData(this.createdUrl, met, formdata).then(res => {
                // console.log(res);
                Message({
                    message: res.msg,
                    type: 'success',
                    duration: 3 * 1000
                })
                let newModata = {}
                getWork(this.getUrl, 'get').then(res1 => {
                    newModata = res1
                    this.$emit('purview-newmodu', { newModata });
                });
            })
            this.$emit('purview-modu', false);
            // this.urlmodu = ''
        }
    },
    created() {
        this.iconList = elementIcons
    },
};
</script>
<style scoped>
.el-button--mini,
.el-button--small {
    padding: 8px 10px;
}

.chooseIcons {
    width: 100%;
    margin-top: 5px;
}

.iconList {
    width: 30vw;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    color: #000000;
    font-size: 20px;
    /*border: 1px solid #e6e6e6;*/
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    margin: 5px;

}

.icon:hover {
    color: red;
    border-color: red;
}

.iconDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #dedede;
    height: 32px;
    border-radius: 5px;
}

.iconDiv i {
    font-size: 20px;
    width: 34px;
    text-align: center;
}

.iconName {
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #d1d1d1;
    padding-left: 5px;
}
</style>